<template>
  <div id="hrList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords" placeholder="搜索企业用户账号、真实姓名或所属公司名称"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索</el-button>
    <el-table
        height="536"
        :data="hrList"
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          label="企业用户账号"
          prop="userName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="真实姓名"
          align="center"
          prop="realName"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="所属公司"
          align="center"
          prop="companyName"
          show-overflow-tooltip
          width="200%">
      </el-table-column>
      <el-table-column
          label="会员"
          align="center"
          prop="vip"
           width="85%"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.state==1?'普通会员':scope.row.state==2?'企业会员':'非会员'}}
        </template>
      </el-table-column>
      <el-table-column
          label="职位"
          align="center"
          prop="position"
          show-overflow-tooltip
          width="100%">
      </el-table-column>
      <el-table-column
          label="状态"
          align="center"
          width="70%"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.state==1?'启用':'禁用'}}
        </template>
      </el-table-column>
      <el-table-column
          label="注册时间"
          prop="createTime"
          sortable
          align="center"
          width="170%"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="260%">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="详细信息" placement="top" >
            <el-button  size="mini" @click="hrInfo(scope.row.userId)" type="success" class="iconfont icon-xiangqing"/>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="启用" placement="top" >
            <el-button v-show="scope.row.state == 0" @click="disableHandle(scope.row.userId,scope.row.userName,scope.row.state)" type="warning" size="mini" class="iconfont icon-disableUser">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="禁用" placement="top" >
            <el-button v-show="scope.row.state == 1" @click="disableHandle(scope.row.userId,scope.row.userName,scope.row.state)" type="success" size="mini" class="iconfont icon-qiyongyonghu">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除" placement="top" >
            <el-button @click="deleteHandle(scope.row.userId,scope.row.userName)"  size="mini" icon="el-icon-delete" type="danger"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="企业用户信息" :visible.sync="dialogTableVisible" width="60%">
      <el-descriptions class="margin-top" :column="3"  border>
        <el-descriptions-item label="企业用户账号">{{ this.hr.userName }}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{ this.hr.realName }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar :src=this.hr.photoUrl ></el-avatar>
     </el-descriptions-item>
        <el-descriptions-item label="昵称">{{ this.hr.pickName }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ this.hr.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ this.hr.age }}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{ this.hr.liveCity }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ this.hr.tel }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{this.hr.email}}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ this.hr.state == 1 ? '启用' : '禁用' }}</el-descriptions-item>
        <el-descriptions-item label="认证材料地址">
          <el-link icon="el-icon-download" :underline="false" type="primary" :href="this.hr.authUrl">下载</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="会员开通时间">{{this.hr.vipCreateTime}}</el-descriptions-item>
        <el-descriptions-item label="会员到期时间">{{this.hr.vipDueTime}}</el-descriptions-item>
        <el-descriptions-item label="所在公司">{{this.hr.companyName}}</el-descriptions-item>
        <el-descriptions-item label="公司职位">{{this.hr.position}}</el-descriptions-item>
        <el-descriptions-item label="个人介绍">{{this.hr.introduce}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
  </div>
</template>

<script>
import {delUser, getUserList, enableDisableUser,} from "../../network/admin";
export default {
  name: "HRList",
  data(){
    return{
      hrList:[],
      loading:true,
      keywords:'',
      value:false,
      currentPage:1,
      total:1,
      pageSize:9,
      userType:1,
      dialogTableVisible:false,
      hr:{},
    }
  },

  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods:{
    handleCurrentChange(currentPage){
      getUserList(this.userType,this.keywords,currentPage,this.pageSize).then(res=>{
        this.loading=false;
        this.total=res.data.data.total;
        this.hrList=res.data.data.list;
        this.currentPage=currentPage;
      })
    },
    searchHandle(){
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    deleteHandle(userId,userName){
      this.$confirm('你确定要删除账号"' + userName + '"吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser(userId).then(res=>{
          this.$message.success('账号'+userName+res.data.data);
          this.handleCurrentChange(this.currentPage)
        }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    disableHandle(userId,userName,state){
      enableDisableUser(userId).then(res=>{
        if(res.data.code==100){
          this.$message.success('账号'+userName+(state==1?'禁用':'启用')+'成功');
        }
        this.handleCurrentChange(this.currentPage)
      }).catch()
    },
    indexMethod(index) {
      return (this.currentPage-1)*this.pageSize+1 + index;
    },
    hrInfo(hrId){
      this.hr=this.hrList.find((hr) => hr.userId == hrId);

      console.log(this.hr.photoUrl)
      this.dialogTableVisible=true;
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label{
  min-width: 130px;
  height:50px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}
.el-form-item__content{
  height:50px;
}
</style>